<template>
    <div class="buy-course">
      <div class="course-list-box">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/?type=1' }"
            >科目一</el-breadcrumb-item
          >
          <el-breadcrumb-item>优品好课</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="course-list">
          <div class="course-item" v-for="item in courseList" :key="item.id" @click="gotoDetail(item.id)">
            <img :src="item.img" alt="" />
            <div class="course-title">{{ item.title }}</div>
            <div class="course-info">
              <div class="course-time">{{ item.time }}课时</div>
              <img src="../../assets/play1.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "GoodCourse",
    data() {
      return {
        courseList: [
          {
            id: 1,
            title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
            img: require("../../assets/keer.png"),
            time: "4",
          },
          {
            id: 2,
            title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
            img: require("../../assets/keer.png"),
            time: "4",
          },
          {
            id: 3,
            title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
            img: require("../../assets/keer.png"),
            time: "4",
          },
          {
            id: 4,
            title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
            img: require("../../assets/keer.png"),
            time: "4",
          },
          {
            id: 5,
            title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
            img: require("../../assets/keer.png"),
            time: "4",
          },
          {
            id: 6,
            title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
            img: require("../../assets/keer.png"),
            time: "4",
          },
          {
            id: 7,
            title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
            img: require("../../assets/keer.png"),
            time: "4",
          },
          {
            id: 8,
            title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
            img: require("../../assets/keer.png"),
            time: "4",
          },
        ],
      };
    },
    methods:{
      gotoDetail(id){
          this.$router.push({
              path:'/GoodCourseDetail',
              query:{
                  id
              }
          })
      }
    }
  };
  </script>
  
  <style lang="scss">
  .course-list-box {
    padding: 1.5% 12.5%;
  
    .course-list {
      padding: 4.4vh 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
  
      .course-item {
        width: 22%;
        box-shadow: 0px 3px 10px 0px rgba(153, 153, 153, 0.1);
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        margin-bottom: 2vh;
        user-select: none;
  
        > img {
          width: 100%;
        }
  
        > div {
          padding: 2%;
        }
  
        .course-title {
          color: #333333;
          font-size: 1.8vh;
        }
  
        .course-info {
          display: flex;
          justify-content: space-between;
  
          .course-time {
            color: #999999;
            font-size: 1.6vh;
          }
  
          >img{
              width: 1vw;
              height: 2vh;
          }
        }
      }
    }
  }
  </style>